<template>
  <el-dialog
    title="上传文件"
    :close-on-click-modal="false"
    @close="closeHandle"
    :visible.sync="visible"
    append-to-body>
    <el-upload
      :action="url"
      :auto-upload="false"
      :before-upload="beforeUploadHandle"
      :on-success="successHandle"
      :limit="1"
      :data="info"
      :file-list="fileList"
      style="text-align: center;">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text"><em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只支持xls格式</div>
    </el-upload>
    <el-select v-model="info.type" clearable filterable placeholder="活动名称">
      <el-option
        v-for="type in whitelistType"
        :key="type.value"
        :label="type.name"
        :value="type.value">
      </el-option>
    </el-select>
    <el-input style="width: 200px;" v-model="info.number" placeholder="次数"></el-input>
    <el-input style="width: 200px;" v-model="info.level" placeholder="等级"></el-input>
    <el-input style="width: 200px;" v-model="info.batch" placeholder="批次，可不填默认为类型"></el-input>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="download">模板下载</el-button>
<!--    <el-button style="margin-left: 10px;" size="small" type="success" @click="download(6)">三选一\核卡有礼白名单模版</el-button>-->
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        myHeaders: {},
        visible: false,
        url: '',
        num: 0,
        successNum: 0,
        info: {
          type: '',
          number: '',
          level: ''
        },
        whitelistType: [],
        fileList: []
      }
    },
    methods: {
      init () {
        this.myHeaders = { 'token': this.$cookie.get('token') }
        this.url = this.$http.BASE_URL + `/mall/whitelist/upload?token=${this.$cookie.get('token')}`
        this.visible = true
        this.getBranchList()
      },
      getBranchList () {
        this.$http({
          url: '/sys/dict/queryByCode',
          method: 'get',
          params: {
            'code': 'WHITELIST_TYPE'
          }
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.whitelistType = data.list
          } else {
            this.whitelistType = []
          }
        })
      },
      // 上传之前
      beforeUploadHandle (file) {
        if (file.type !== 'application/vnd.ms-excel' && file.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
          this.$message.error('只支持xls,xlsx格式！')
          return false
        }
        if (this.info.type === '' || this.info.number === '') {
          this.$message.error('请填写参数')
          return false
        }
        this.num++
      },
      submitUpload () {
        this.$children[0].$children[0].submit()
        // this.visible = false
      },
      download () {
        const { export_json_to_excel } = require('../../../excel/Export2Excel')
        let  tHeader = ['手机号码','卡号','等级，1潇湘金卡，2潇湘钻石卡，3：q能卡，4途虎卡',] // 对应表格输出的title
        let  filterVal = ['phone','acctNo','level',] // 对应表格输出的数据
        let exceldata = this.formatJson(filterVal, [{'phone': '13333333333','acctNo': '1','level': '1'}])
        // switch (type){
        //   case 6:
        //     tHeader = ['手机号码','卡类型','等级，1潇湘金卡，2潇湘钻石卡，3：q能卡，4途虎卡',] // 对应表格输出的title
        //     filterVal = ['phone','acctNo','level',] // 对应表格输出的数据
        //     exceldata = this.formatJson(filterVal, [{'phone': '13333333333','acctNo': '1','level': '1'}])
        //     export_json_to_excel([tHeader], [exceldata], '白名单导入模板')// 对应下载文件的名字
        //     break
        //   default:
        //   case 0:
        //     export_json_to_excel([tHeader], [exceldata], '白名单导入模板')// 对应下载文件的名字
        //     break
        // }
        export_json_to_excel([tHeader], [exceldata], '白名单导入模板')// 对应下载文件的名字
      },
      formatJson (filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      // 上传成功
      successHandle (response, file, fileList) {
        this.fileList = []
        this.successNum++
        if (response && response.code === 0) {
          if (this.num === this.successNum) {
            this.$confirm('操作成功,' + response.msg + ' 是否继续操作?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).catch(() => {
              this.visible = false
            })
          }
        } else {
          this.$message.error(response.msg)
        }
      },
      errHandle (response, file, fileList) {
        this.$message.error(response)
      },
      // 弹窗关闭时
      closeHandle () {
        this.fileList = []
        this.$emit('refreshDataList')
      }
    }
  }
</script>
